Benefits List

Basic icon (default color) + title + description

  • Benefits Title Here

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec justo at nibh iaculis ullamcorper at eget quam. Integer sit amet commodo mi augue.

  • Benefits Title Here

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec justo at nibh iaculis ullamcorper at eget quam. Integer sit amet commodo mi augue.

  • Benefits Title Here

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec justo at nibh iaculis ullamcorper at eget quam. Integer sit amet commodo mi augue.

Outlined icon (WCAG-safe brand color) + title + description

  • Benefits Title Here

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec justo at nibh iaculis ullamcorper at eget quam. Integer sit amet commodo mi augue.

  • Benefits Title Here

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec justo at nibh iaculis ullamcorper at eget quam. Integer sit amet commodo mi augue.

  • Benefits Title Here

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec justo at nibh iaculis ullamcorper at eget quam. Integer sit amet commodo mi augue.

Solid icon (WCAG-safe brand color) + linked title + description

  • Benefits Title Here

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec justo at nibh iaculis ullamcorper at eget quam. Integer sit amet commodo mi augue.

  • Benefits Title Here

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec justo at nibh iaculis ullamcorper at eget quam. Integer sit amet commodo mi augue.

  • Benefits Title Here

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec justo at nibh iaculis ullamcorper at eget quam. Integer sit amet commodo mi augue.

Solid icon (WCAG-safe brand color) + title + description

  • Benefits Title Here

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec justo at nibh iaculis ullamcorper at eget quam. Integer sit amet commodo mi augue.

  • Benefits Title Here

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec justo at nibh iaculis ullamcorper at eget quam. Integer sit amet commodo mi augue.

  • Benefits Title Here

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec justo at nibh iaculis ullamcorper at eget quam. Integer sit amet commodo mi augue.

Basic icon (WCAG-safe brand color) + title + description

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec justo at nibh iaculis ullamcorper at eget quam. Integer sit amet commodo mi augue.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec justo at nibh iaculis ullamcorper at eget quam. Integer sit amet commodo mi augue.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec justo at nibh iaculis ullamcorper at eget quam. Integer sit amet commodo mi augue.

HTML

<section class="grid-container"> 
    <ul class="benefits-list full-width">
        <li class="benefits-list-item">
            <div class="benefits-list-item-icon-container">
                <span class="cfaicon-lookUpSpecificIconName"></span>
            </div>
            <p class="benefits-list-item-title h4">Benefits Title Here</p>
            <p>Description text goes here.</p>
        </li>
        <li class="benefits-list-item">
            <div class="benefits-list-item-icon-container">
                <span class="cfaicon-lookUpSpecificIconName"></span>
            </div>
            <p class="benefits-list-item-title h4"><a href="#">Benefits Title Here</a"></p>
            <p>Description text goes here.</p>
        </li>
        <li class="benefits-list-item">
            <div class="benefits-list-item-icon-container">
                <span class="cfaicon-lookUpSpecificIconName"></span>
            </div>
            <p class="benefits-list-item-title h4">Benefits Title Here</p>
            <p>Description text goes here.</p>
        </li>
    </ul>
</section>

Problem Being Solved

We need to display a short list of benefits in a way that showcases them.

When to Use and Best Practices

  • Benefits are intended specifically to list advantages or marketing points for a specific audience.
  • Benefit items work best in sets of three or six. Limit the total number of items in a set to six or less.
  • Stick to WCAG-safe colors for icons. All primary brand colors meet this requirement.
  • Keep titles and descriptions consise.
  • Be consistent with whatever combination works best for your needs. (Ex: Varying the icon type [solid, outline, standalone] or color within a set should be avoided. Linking some titles and not others should also be avoided.)

When Not to Use

  • Benefits should not be used for long chunks of content, or for non-benefit-specific information.
  • AVOID varying combinations and icon colors/styles within sets — for example:

    • Benefits Title Here

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec justo at nibh iaculis ullamcorper at eget quam. Integer sit amet commodo mi augue.

    • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec justo at nibh iaculis ullamcorper at eget quam. Integer sit amet commodo mi augue.

    • Benefits Title Here

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec justo at nibh iaculis ullamcorper at eget quam. Integer sit amet commodo mi augue.

Formatting

Place benfits-list in a <section class="grid-container">.

Use our brand icons and follow the documentation noted to achieve your desired results.